//mainImage是shader toy中的入口函数，是片元着色器的入口函数，它的返回值是vec4，表示片元的颜色
//他是一个内置的函数，函数名是固定的，不能修改
//iTime是一个内置的全局变量，表示时间，是一个float类型的变量,表示从程序开始运行到当前时间的秒数

vec2 ClipCoord(in vec2 fragCoord) {
    //偏移归一化坐标

    //fragCoord是片元坐标，iResolution.xy是屏幕分辨率，
    //这里fragCoord / iResolution.xy是将屏幕坐标转换为[0,1]的归一化坐标
    //然后减去0.5，是将坐标系原点从左上角移动到中心
    //为什么能够减去0.5呢？因为归一化坐标是[0,1]，所以坐标系的中心是0.5
    //但是为什么iResolution.xy可以减去0.5，因为xy是vec2类型，是一个二维向量，所以可以直接减去0.5
    //向量减去一个数，是将向量的每个分量都减去这个数，
    //最终返回的是一个以中心为原点的归一化坐标
  return 2. * (fragCoord / iResolution.xy - 0.5);
}

// vec2 ClipCoord2(in vec2 fragCoord) {
//     //偏移归一化坐标
//   return 2. * (fragCoord - 0.5 * iResolution.xy) / iResolution.x;
// }

struct bg_color {
  vec3 color;
  float time;
};

void mainImage(out vec4 fragColor, in vec2 fragCoord) {
  //片元着色器代码,入参为片元坐标，出参为片元颜色

  //bg_color是一个结构体，包含了一个vec3类型的color和一个float类型的time
  //这里bg是一个bg_color类型的变量，初始化了一个vec3类型的颜色和一个时间
  bg_color bg = bg_color(vec3(1., 1.0, 0.0), iTime);

  vec2 uv = ClipCoord(fragCoord);
  // vec2 uv = ClipCoord2(fragCoord);
  //length函数是一个内置函数，用来计算向量的长度，这里是计算uv向量的长度
  float coordlen = length(uv);
  float iTimeYS = bg.time - floor(bg.time);
  //先来一个纯色背景
  fragColor = vec4(bg.color, 1);

  // //如何在shader toy中取余数呢：iTime % 1.0这样是不对的，因为不支持这样的写法，正确的写法是iTime - floor(iTime)
  // //这里的iTimeYS会突然变成0，这样会导致颜色跳动，所以我们需要他是一个0-1然后再1-0的过程
  // //这样的话，颜色就会平滑的变化
  // //我们可以通过cos函数来实现这样的效果，iTimeYS是一个0-1的过程，cos(iTimeYS * 3.1415926)是一个1-0-1的过程
  // fragColor = vec4(cos(bg.time), bg.color.y, 1. - cos(bg.time), 1);
  // //如果长度小于0.5（相当于以屏幕中心为原点，半径在0.5以内），那么将颜色设置为红色
  if(coordlen <= 0.5) {
    fragColor = vec4(coordlen * 2., 1, 1, 1);
  }
  // fragColor = vec4(coordlen, 0, 0, 1);
}
